<template>
    <div class="index">
        <div class="index_top">
            <div class="index_title">我是首页</div>
            <div class="index_search">
                <input type="text" placeholder="搜索"/>
           </div>
        </div>


        <div class="index_list1">
            <div class="list1_top">
                <div class="firm1_title">影院热映</div>
                <div class="firm1_other">查看更多 ></div>
            </div>
            <div class="firm">
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
            </div>
           

        </div>
        <div class="index_list1">
            <div class="list1_top">
                <div class="firm1_title">影院热映</div>
                <div class="firm1_other">查看更多 ></div>
            </div>
            <div class="firm">
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
            </div>
           

        </div>
        <div class="index_list1">
            <div class="list1_top">
                <div class="firm1_title">影院热映</div>
                <div class="firm1_other">查看更多 ></div>
            </div>
            <div class="firm">
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
            </div>
           

        </div>
        <div class="index_list1">
            <div class="list1_top">
                <div class="firm1_title">影院热映</div>
                <div class="firm1_other">查看更多 ></div>
            </div>
            <div class="firm">
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
                 <div class="firmlist">
                   <img src="/src/assets/logo.svg">
                   <div class="firmlist_name">阿凡达</div>
                   <div class="firm1list_score">评分：5</div>
                 </div>
            </div>
           

        </div>

    </div>
    
    <TabBar/><!--引入导航栏下标-->
</template>

<script setup>
import TabBar from '@/components/TabBar/TabBar.vue';
</script>

<style scoped>
.index{
    width: 100%;
    height: 100%;
}
.index .index_top{
    background-color: green;
    width: 100%;
    text-align: center;
}
.index_title{
    font-size: 30px;
    padding-top: 5px;
    padding-bottom: 10px;
}

input{
    height: 20%;
    width: 80%;
    text-align: center;
    margin-bottom: 10px;
}

 .list1_top{
    display: flex;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.firm1_title{
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;

}

 .firm1_other{
   text-align: right;
   color: greenyellow; 
   margin-left: calc(100% - 45%);
   font-weight: bold;
}
.firm{
    display: flex;
    height: 100%;
}
.firmlist{
     margin-right: 10px;/*横向排列后调节间距的语句 */
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;

}

</style>